<template>
  <div class="ordersNow">
    <div class="title">
      <navTitle :navArr="navArr">
        <div class="buttons" slot="right">
          <b class="text-button-b" @click="logisticShow=true">物流成本</b>
          <a href="../../../../static/html/video.html" target="_blank" class="text-button-b gift">视频演示</a>
        </div>
      </navTitle>
      <LogisticList v-if="logisticShow" @close="logisticShow=false"></LogisticList>
    </div>
    <div class="quickBuy">
      <headsTitle title="快捷采购">
        <div class="insert" slot="content">
          <ul class="types">
            <li @click="checkType(item.label)" v-for="(item, index) in typsArr" :key="index" :class="{ 'active': orderType == item.label }">
              <el-radio v-model="orderType" :label="item.label">{{ item.name }}</el-radio>
            </li>
          </ul>
          <ul class="logos">
            <li v-if="!(orderType==1&&item.type==5)" @click="logoCheck(item.type)" v-for="(item, index) in logosArr" :key="index" :class="{ 'active': item.type == logoType }">
              <i :class="item.icon"></i>
              <br>
              <span>{{ item.name }}</span>
            </li>
          </ul>
          <p v-if="orderType==1" class="autoTips">
            ◎ 下载后台订单 无需任何修改 直接上传
            <strong>筛选由我们帮您完成</strong>
            <br>
            <!-- <span>请尽量控制SKU在8个以内</span> -->
            <span>◎ 导出订单时，请合理选择时间范围，避免一次上传过多订单，导致处理失败。</span>
          </p>
          <div class="footer">
            <div class="autoBase" v-if="orderType==1">
              <autoBase :shopType="logoType"></autoBase>
            </div>
            <div class="tableBase" v-if="orderType==2">
              <tableBase :shopType="logoType"></tableBase>
            </div>
            <div class="handBase" v-if="orderType==3">
              <handBase :shopType="logoType"></handBase>
            </div>
          </div>
        </div>
      </headsTitle>
    </div>
    <div class="load" v-if="isLoading">
      <loadingBase></loadingBase>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
import HeadsTitle from '../../base/headsTitle/index'
import AutoBase from './base/autoBase'
import TableBase from './base/tableBase'
import HandBase from './base/handBase'
import LoadingBase from '../../base/loadingBase'
import LogisticList from '../../base/alert/logisticList'
export default {
  name: 'ordersNow',
  components: {
    NavTitle,
    HeadsTitle,
    AutoBase,
    TableBase,
    HandBase,
    LoadingBase,
    LogisticList
  },
  data () {
    return {
      navArr: ['立即采购'],
      typsArr: [
        {
          name: '智能筛选发货',
          label: '1'
        },
        {
          name: '表格导入发货',
          label: '2'
        },
        {
          name: '手工下单',
          label: '3'
        }
      ],
      logosArr: [
        {
          icon: 'taobao',
          name: '淘宝',
          type: 1
        },
        {
          icon: 'tianmao',
          name: '天猫',
          type: 2
        },
        {
          icon: 'jingdong',
          name: '京东',
          type: 3
        },
        {
          icon: 'pingduoduo',
          name: '拼多多',
          type: 4
        },
        {
          icon: 'other',
          name: '其他',
          type: 5
        }
      ],
      logisticShow: false,
      orderType: '1',
      logoType: 1,
      isLoading: false
    }
  },
  methods: {
    checkType (type) { // 选择发货类型
      this.orderType = type
    },
    logoCheck (type) { // 选择店铺类型
      this.logoType = type
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.ordersNow
  .title
    .buttons
      .gift
        margin-left 20px
        text-decoration none
  .quickBuy
    margin-top 20px
    .insert
      padding 30px 120px
      .types
        display flex
        li
          height 48px
          width 232px
          margin-right 37px
          box-sizing border-box
          border-radius 2px
          line-height 48px
          cursor pointer
          padding 0 40px
          border 1px solid RGBA(136, 136, 136, 0.8)
          transition all 0.2s
          &:last-child
            margin-right 0
        .active
          border 1px solid $fontColor-o
      .autoTips
        margin-top 24px
        fontSize($fontSize-m, 30px, $fontColor)
        strong
          color $mainColor
        span
          // fontSize($fontSize-m, 30px, $mainColor)
      .logos
        margin-top 33px
        display flex
        li
          padding 22px 29px
          border 1px solid #EEEEEE
          border-radius 4px
          box-sizing border-box
          text-align center
          cursor pointer
          margin-right 33px
          &:last-child
            margin-right 0
          i
            display inline-block
            width 60px
            height 60px
            vertical-align middle
            font-size 60px
            background-size 100% 100%
            background-repeat no-repeat
            margin-bottom 40px
          .taobao
            background-image url('../../../assets/images/taobao.png')
          .tianmao
            background-image url('../../../assets/images/tmall.png')
          .jingdong
            background-image url('../../../assets/images/jd.png')
          .pingduoduo
            background-image url('../../../assets/images/pingduoduo.png')
          .other
            background-image url('../../../assets/images/other.png')
          span
            fontSize($fontSize-l, 1, $fontColor)
        .active
          position relative
          border 1px solid $fontColor-o
          transition all 0.2s
          &:after
            content ''
            position absolute
            width 0
            height 0
            right 0
            bottom 0
            border-color transparent $fontColor-o $fontColor-o transparent
            border-width 20px
            border-style solid
            z-index 2
          &:before
            content ''
            position absolute
            bottom 5px
            right 6px
            width 8px
            height 16px
            transform rotate(45deg)
            border-bottom 2px solid #ffffff
            border-right 2px solid #ffffff
            z-index 3
      .footer
        margin 30px 0 40px
</style>
